<template>
  <div class="event-list-container">
    <!-- 加载状态 -->
    <div v-if="props.loading" class="loading-state">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="props.error" class="error-state">
      <div class="error-icon">⚠️</div>
      <p>{{ props.error }}</p>
      <button @click="handleRefresh" class="retry-btn">重试</button>
    </div>

    <!-- 空状态 -->
    <div v-else-if="props.events.length === 0" class="empty-state">
      <div class="empty-icon">📋</div>
      <p>暂无比赛数据</p>
      <p class="empty-hint">快去发现有趣的比赛吧！</p>
    </div>

    <!-- 比赛列表 -->
    <div v-else class="events-grid">
      <EventCard
        v-for="event in props.events"
        :key="getEventId(event)"
        :event="event"
        :is-registered="isEventRegistered(event)"
        @register="handleRegister"
        @cancel-registration="handleCancelRegistration"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import EventCard from './EventCard.vue';

// 定义 Event 接口（复制 EventCard 中的定义）
interface Event {
  eventId?: number;
  eventID?: string;
  eventName: string;
  eventTime: string;
  eventDesc: string;
  eventLocation: string;
  eventImg?: string;
  eventCategory: string;
  price: number;
  isFeatured: boolean;
}

interface Props {
  events: Event[];
  loading: boolean;
  error: string;
  registeredEventIds?: Set<number | string>;
  onRefresh?: () => void;
  onViewDetail?: (eventId: number) => void;
  onRegisterEvent?: (eventId: number) => void;
}

// 定义 props 和 emit
const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'refresh'): void;
  (e: 'view-detail', eventId: number): void;
  (e: 'register-event', eventId: number): void;
  (e: 'cancel-registration', eventId: number): void;
}>();

// 获取事件ID
const getEventId = (event: Event): string => {
  const id = event.eventID || event.eventId;
  return String(id || '');
};

// 判断事件是否已注册
const isEventRegistered = (event: Event): boolean => {
  const eventId = getEventId(event);
  return props.registeredEventIds?.has(eventId) || false;
};

// 处理刷新
const handleRefresh = () => {
  props.onRefresh?.();
  emit('refresh');
};

// 处理报名
const handleRegister = (eventId: number) => {
  props.onRegisterEvent?.(eventId);
  emit('register-event', eventId);
};

// 处理取消报名
const handleCancelRegistration = (eventId: number) => {
  console.log('取消报名:', eventId);
  emit('cancel-registration', eventId);
};
</script>

<style scoped>
/* 样式保持不变 */
.event-list-container {
  padding: 20px 0;
}

.loading-state {
  text-align: center;
  padding: 60px 0;
}

.spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #31B310;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-state p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.error-state {
  text-align: center;
  padding: 60px 0;
  color: #dc3545;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.error-state p {
  margin-bottom: 20px;
  font-size: 16px;
}

.retry-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #31B310, #2a990e);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.empty-state {
  text-align: center;
  padding: 80px 0;
  color: #6c757d;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-hint {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.7;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 10px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }

  .loading-state,
  .error-state,
  .empty-state {
    padding: 40px 0;
  }
}
</style>
